<template>
    <div>
        <h1>非药品项目收费管理</h1>
        <el-input v-model="keywords" style="width: 200px" placeholder="请输入搜索关键词"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="dialogFormVisible = true">新增</el-button>
        <!--数据显示表格-->
        <el-table :data="tableData" border style="width: 100%;text-align: center">
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="itemCode" label="项目编码" width="100"></el-table-column>
            <el-table-column prop="itemName" label="项目名称"></el-table-column>
            <el-table-column prop="format" label="规格"></el-table-column>
            <el-table-column prop="price" label="单价"></el-table-column>
            <el-table-column prop="expClassID" label="所属费用科目ID"></el-table-column>
            <el-table-column prop="deptID" label="执行科室ID"></el-table-column>
            <el-table-column prop="mnemonicCode" label="拼音助记码"></el-table-column>
            <el-table-column prop="recordType" label="项目类型"></el-table-column>
            <el-table-column prop="creationDate" label="上次变更时间" width="250"></el-table-column>
            <el-table-column label="操作" width="100" align="center">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="primary" >编辑</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100" align="center">
                <template slot-scope="scope">
                    <el-button type="danger"  @click="hanledelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
<!--        分页插件-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalPage">
        </el-pagination>
        <!--添加项目的表格-->
        <el-dialog title="添加非收费项目" :visible.sync="dialogFormVisible">
            <el-form :model="dialogFormData" :rules="dialogFormRules" ref="dialogFormData">
                <el-form-item label="项目编码" :label-width="formLabelWidth" prop="ItemCode">
                    <el-input v-model="dialogFormData.ItemCode" autocomplete="off" placeholder="请输入项目编码"></el-input>
                </el-form-item>
                <el-form-item label="项目名称" :label-width="formLabelWidth" prop="ItemName">
                    <el-input v-model="dialogFormData.ItemName" autocomplete="off" placeholder="请输入项目名称"></el-input>
                </el-form-item>
                <el-form-item label="规格" :label-width="formLabelWidth" prop="Format">
                    <el-input v-model="dialogFormData.Format" autocomplete="off" placeholder="请输入规格"></el-input>
                </el-form-item>
                <el-form-item label="单价" :label-width="formLabelWidth" prop="Price">
                    <el-input v-model="dialogFormData.Price" autocomplete="off" placeholder="请输入单价"></el-input>
                </el-form-item>
                <el-form-item label="所属费用科目ID" :label-width="formLabelWidth" prop="ExpClassID">
                    <el-input v-model="dialogFormData.ExpClassID" autocomplete="off" placeholder="请输入所属费用科目ID"></el-input>
                </el-form-item>
                <el-form-item label="执行科室ID" :label-width="formLabelWidth" prop="DeptID">
                    <el-input v-model="dialogFormData.DeptID" autocomplete="off" placeholder="请输入执行科室ID"></el-input>
                </el-form-item>
                <el-form-item label="拼音助记码" :label-width="formLabelWidth" prop="MnemonicCode">
                    <el-input v-model="dialogFormData.MnemonicCode" autocomplete="off" placeholder="请输入拼音助记码"></el-input>
                </el-form-item>
                <el-form-item label="项目类型" :label-width="formLabelWidth" prop="RecordType">
                    <el-select v-model="dialogFormData.RecordType" placeholder="请选择项目类型">
                        <el-option label="检查" value="1"></el-option>
                        <el-option label="检验" value="2"></el-option>
                        <el-option label="处置" value="3"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormConfirm('dialogFormData')">确 定</el-button>
            </div>
        </el-dialog>
<!--        编辑表单-->
        <el-dialog title="编辑项目" :visible.sync="updatedialogFormVisible">
            <el-form :model="updatedialogFormData" :rules="updatedialogFormRules" ref="updatedialogFormData">
                <el-form-item label="项目编码" :label-width="formLabelWidth" prop="itemCode">
                    <el-input v-model="updatedialogFormData.itemCode" autocomplete="off" placeholder="请输入项目编码"></el-input>
                </el-form-item>
                <el-form-item label="项目名称" :label-width="formLabelWidth" prop="itemName">
                    <el-input v-model="updatedialogFormData.itemName" autocomplete="off" placeholder="请输入项目名称"></el-input>
                </el-form-item>
                <el-form-item label="规格" :label-width="formLabelWidth" prop="format">
                    <el-input v-model="updatedialogFormData.format" autocomplete="off" placeholder="请输入规格"></el-input>
                </el-form-item>
                <el-form-item label="单价" :label-width="formLabelWidth" prop="price">
                    <el-input v-model="updatedialogFormData.price" autocomplete="off" placeholder="请输入单价"></el-input>
                </el-form-item>
                <el-form-item label="所属费用科目ID" :label-width="formLabelWidth" prop="expClassID">
                    <el-input v-model="updatedialogFormData.expClassID" autocomplete="off" placeholder="请输入所属费用科目ID"></el-input>
                </el-form-item>
                <el-form-item label="执行科室ID" :label-width="formLabelWidth" prop="deptID">
                    <el-input v-model="updatedialogFormData.deptID" autocomplete="off" placeholder="请输入执行科室ID"></el-input>
                </el-form-item>
                <el-form-item label="拼音助记码" :label-width="formLabelWidth" prop="mnemonicCode">
                    <el-input v-model="updatedialogFormData.mnemonicCode" autocomplete="off" placeholder="请输入拼音助记码"></el-input>
                </el-form-item>
                <el-form-item label="项目类型" :label-width="formLabelWidth" prop="recordType">
                    <el-select v-model="updatedialogFormData.recordType" placeholder="请选择项目类型">
                        <el-option label="检查" value="1"></el-option>
                        <el-option label="检验" value="2"></el-option>
                        <el-option label="处置" value="3"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updatedialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updatedialogFormConfirm('updatedialogFormData')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Fmeditem",
        data(){
            return{
                keywords:'',
                formLabelWidth: '120px',
                dialogFormVisible:false,
                updatedialogFormVisible:false,
                tableData:[],
                pageSize:10,
                totalPage:0,
                currentPage:1,
                dialogFormData:{
                    ItemCode:'',
                    ItemName:'',
                    Format:'',
                    Price:'',
                    ExpClassID:'',
                    DeptID:'',
                    MnemonicCode:'',
                    RecordType:''
                },
                updatedialogFormData:{
                    Id:'',
                    itemCode:'',
                    itemName:'',
                    format:'',
                    price:'',
                    expClassID:'',
                    deptID:'',
                    mnemonicCode:'',
                    recordType:''
                },
                dialogFormRules:{
                    ItemCode:[
                        {
                            required : true, message : '请输入项目编码', trigger : "blur"}
                        ],
                    ItemName:[
                        {
                            required : true, message : '请输入项目名称', trigger : "blur"}
                        ],
                    Format:[
                        {
                            required : true, message : '请输入规格', trigger : "blur"}
                        ],
                    Price:[
                        {
                            required : true, message : '请输入单价', trigger : "blur"}
                        ],
                    ExpClassID:[
                        {
                            required : true, message : '请输入所属费用科目ID', trigger : "blur"}
                        ],
                    DeptID:[
                        {
                            required : true, message : '请输入执行科室ID', trigger : "blur"}
                        ],
                    MnemonicCode :[
                        {
                            required : true, message : '请输入拼音助记码', trigger : "blur"}
                        ],
                    RecordType:[
                        {
                            required : true, message : '请选择项目类型', trigger : "change"}
                        ]
                },updatedialogFormRules:{
                    itemCode:[
                        {
                            required : true, message : '请输入项目编码', trigger : "blur"}
                    ],
                    itemName:[
                        {
                            required : true, message : '请输入项目名称', trigger : "blur"}
                    ],
                    format:[
                        {
                            required : true, message : '请输入规格', trigger : "blur"}
                    ],
                    price:[
                        {
                            required : true, message : '请输入单价', trigger : "blur"}
                    ],
                    expClassID:[
                        {
                            required : true, message : '请输入所属费用科目ID', trigger : "blur"}
                    ],
                    eeptID:[
                        {
                            required : true, message : '请输入执行科室ID', trigger : "blur"}
                    ],
                    mnemonicCode :[
                        {
                            required : true, message : '请输入拼音助记码', trigger : "blur"}
                    ],
                    recordType:[
                        {
                            required : true, message : '请选择项目类型', trigger : "change"}
                    ]
                }
            }
        },
        methods:{
            dialogFormConfirm(dialogFormData){
                this.$refs[dialogFormData].validate((valid) => {
                    if (valid) {
                            this.axios.get('http://localhost:8888/his1/fmeditem/insertOne.do',{
                            params:this.dialogFormData
                        }).then((response)=>{
                            if (response.status == 200){
                                this.$message({
                                    type: 'success',
                                    message: '已成功添加信息'
                                })
                                this.dialogFormVisible = false
                                this.$refs[dialogFormData].resetFields();
                            }else{
                                this.$message({
                                    type: 'error',
                                    message: '添加信息失败'
                                })
                            }
                        })
                    } else {
                        this.$message.error('请输入完整消息')
                        return false;
                    }
                });
            },
            search(){
                this.axios.get('http://localhost:8888/his1/fmeditem/search.do',{
                    params:{
                        keywords:this.keywords,
                        pagenum:this.currentPage,
                        pagesize:this.pagesize
                    }
                })
                .then((response)=>{
                    if (response.status == 200){
                        this.tableData = response.data.data.list;
                        this.totalPage = response.data.data.total;
                        console.log(response.data.data)
                    }
                })
            },
            handleSizeChange(val){
                this.pagesize = val
                this.search()
            },
            handleCurrentChange(val){
                console.log(val)
                this.currentPage = val
                this.search()
            },handleClick(row){
                this.updatedialogFormData.Id = row.id,
                this.updatedialogFormData.deptID = row.deptID,
                this.updatedialogFormData.expClassID = row.expClassID,
                this.updatedialogFormData.format = row.format,
                this.updatedialogFormData.itemCode = row.itemCode,
                this.updatedialogFormData.itemName = row.itemName,
                this.updatedialogFormData.mnemonicCode = row.mnemonicCode,
                this.updatedialogFormData.price = row.price,
                this.updatedialogFormData.recordType = row.recordType,
                this.updatedialogFormVisible = true,
                console.log(this.dialogFormData)
            },
            hanledelete(row){
                this.$confirm("确定删除-"+row.itemName+"-项目吗?", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.get("http://localhost:8888/his1/fmeditem/deleteOneById.do",{params:{Id:row.id}})
                        .then((response)=>{
                            if(response.status == 200){
                                this.$message.success('删除成功')
                                this.search();
                            }else(
                                this.$message.error('删除失败')
                            )
                        })

                }).catch(() => {
                    this.$message.info('已取消删除')
                });
            },
            updatedialogFormConfirm(formname){
                this.$refs[formname].validate((valid) => {
                    if (valid) {
                        this.axios.get('http://localhost:8888/his1/fmeditem/updateOne.do',{
                            params:this.updatedialogFormData
                        }).then((response)=>{
                            if (response.status == 200){
                                this.$message({
                                    type: 'success',
                                    message: '已成功保存信息'
                                })
                                this.updatedialogFormVisible = false
                                this.search();
                                this.$refs[formname].resetFields();
                            }else{
                                this.$message({
                                    type: 'error',
                                    message: '添加信息失败'
                                })
                            }
                        })
                    } else {
                        this.$message.error('请输入完整消息')
                        return false;
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>